<template>
  <div class="call-message-list-view">

    <searchComponent
      ref="searchRef"
      :productFields="callFields"
      @search="searchHandle"
      @reset="resetHandle"
    />

    <section style="padding:0 16px;background:#fff;margin-top:10px;">
      <!-- start content -->
      <div class="product-template-list-content">
        <!--operation bar start-->
        <div class="operation-bar-container">
          <div class="action-button-group">
            <span class="el-dropdown-link el-dropdown-btn" @click="showAdvancedSetting">
              选择列
              <i class="iconfont icon-nav-down"></i>
            </span>
          </div>
        </div>
      </div>
      <!-- end  -->

      <callMessageTable 
        v-bind="$props"
        :columns="columns"
        :tableData="tableData"
      />
    </section>

    <div class="table-footer" v-if="total > 0">
      <div class="list-info">共
        <span class="level-padding">{{ total || 0 }}</span>记录
      </div>
      <el-pagination
        class="pagination-contain"
        background
        @current-change="currentChangeHandle"
        @size-change="handleSizeChange"
        :page-sizes="defaultTableData.defaultPageSizes"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="prev, pager, next, sizes, jumper"
        :total="total">
      </el-pagination>
    </div>

     <!-- 选择列 --> 
    <biz-select-column ref="advanced" @save="saveColumnStatus" />
  </div>
</template>

<script>
import fields from '../modal/callMessageListField';
import callMessageTableColumn from '../modal/callMessageTableColumn';
// 搜索组件
import searchComponent from './common/searchComponent';
// table组件
import callMessageTable from './common/callMessageTable';

import { callingRecord, messageTypeList } from '@src/api/DoMyself.js';

import { storageGet, storageSet } from "@src/util/storage";
import { defaultTableData } from '@src/util/table'

const CALL_MESSAGE_LIST_KEY = 'call_message_list';

export default {
  name: 'call-message',
 
  props: ['isLoading'],
  data() {
    return {
      defaultTableData,
      total:0,
      page:{
        pageSize: 10,
        pageNum: 1,
      },
      columns:callMessageTableColumn,
      callFields:[],
      tableData:[],
      
    }
  },

  filters: {
    
  },

  mounted() {
    window.__exports__refresh = this.getList;
    this.getList()
    this.getMsgTypeList()
    this.columns = this.buildTableColumn();
    
  },

  methods: {
    // 构建表格列
    buildTableColumn() {
      let LocalStorageColumn = this.getLocalStorageData()?.[CALL_MESSAGE_LIST_KEY] || [] ;

      callMessageTableColumn.map((item,index) => {
        LocalStorageColumn.map(col => {
          const { show, fixLeft, fieldName } = col

          if(item.fieldName === fieldName){
            item.fixLeft = fixLeft
            item.show = show
          }
          
        })
      })

      return callMessageTableColumn;
    },

    showAdvancedSetting() {
      this.$refs.advanced.open(this.columns);
    },

    // 保存选择列配置
    saveColumnStatus(event) {
      let columns = event.data || []
      
      this.columns = []
      this.$nextTick(() => {
        this.$set(this, 'columns', columns.slice());
        // 保存选择列到本地
        this.saveColumnStatusToStorage()
      })
      this.$message.success(this.$t('common.base.saveSuccess'));
    },

    // 保存选择列配置到本地
    saveColumnStatusToStorage() {
      const localStorageData = this.getLocalStorageData();
      let columnsStatus = null
      // 判断是否存储选择列
      const columnsList = this.columns.map(c => ({
        fieldName: c.fieldName,
        show: c.show,
        width: c.width,
        fixLeft: c.fixLeft
      }));
      
      columnsStatus = localStorageData.columnStatus ? localStorageData.columnStatus : columnsList;
      
      this.saveDataToStorage(CALL_MESSAGE_LIST_KEY, columnsStatus);
    },

    // 获取本地localstorage
    getLocalStorageData() {
      const dataStr = storageGet(CALL_MESSAGE_LIST_KEY, '{}');
      return JSON.parse(dataStr);
    },

    // 保存数据到本地localstorage
    saveDataToStorage(key, value) {
      const data = this.getLocalStorageData();
      data[key] = value;
      storageSet(CALL_MESSAGE_LIST_KEY, JSON.stringify(data));
    },

    getMsgTypeList(){

      messageTypeList().then(res => {

        const { status, data = [] } = res

        if(status !==0 || !data?.length) return

        let dataSource = []
        data.map(item => {
          const { messageType, title } = item

          dataSource.push({
            text:title,
            value:messageType
          })
        })

        this.callFields = fields.map(item => {
          const { fieldName } = item
          if(fieldName === 'messageTitle'){
            item.setting.dataSource = [ ...dataSource ]
          }
          return item
        })
      })
    },

    resetPage(){
      this.page.pageSize = 10
      this.page.pageNum = 1
    },
    // 获取数据
    getList(searchParam = {}) {
      this.$emit('pageLoading', true);
      
      return callingRecord({ ...this.page, ...searchParam }).then(res => {

        const { status, data:{list = [], total = 0}} = res

        if(status !==0 ) {
          return
        }

        this.total = total || 0
        this.tableData = list || []


      }).finally(() => {
        this.$emit('pageLoading', false);
      });
    },

    // 搜索组件调用，获取列表数据
    searchHandle(searchParam = {}){
      this.page.pageNum = 1;
      this.getList(searchParam)
    },

    // 搜索组件调用，重置搜索条件后获取数据
    resetHandle(searchParam = {}){
      this.resetPage()
      this.getList(searchParam)
    },

    // 翻页
    currentChangeHandle(pageNum) {
      this.page.pageNum = pageNum;
      const searchParam = this.$refs.searchRef?.searchModel || {}
      this.getList(searchParam);
    },

    // 页码数切换
    handleSizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.page.pageNum = 1;
      const searchParam = this.$refs.searchRef?.searchModel || {}
      this.getList(searchParam);
    },
  },
  
  components: {
    searchComponent,
    callMessageTable
    // [EditContactDialog.name]: EditContactDialog
  }
};
</script>

<style lang="scss" scoped>
.pagination-contain{
  background: #fff;
  border-radius: 0 0 3px 3px;
  display: flex;
  justify-content: space-between;
}
.product-template-list-content{
  padding:0;
  .operation-bar-container{
    justify-content: flex-end;
    padding-right:0 !important;
  }
}

</style>